/*

The default template function produces markup matching this outline
(assuming you append them to #freeow):

#freeow
	div (classes passed in options get applied here)
		div.background
			div.content
				h2
				p
		span.icon
		span.close
		
*/


/* Boiler Plate */
#status {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 300px;
    z-index: 9999;    
}
#status > div {
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;
}
#status .content {
    margin: 5px 5px 5px 69px;
}
#status h2 {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}
#status p {
    margin: 0;
    padding-top: 8px;
    font-family: Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 11px;
    line-height: 16px;
}
#status .icon {
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    top: 5px;
    left: 10px;
    background: transparent url(../../images/img/notice.png) no-repeat 0 0;
    z-index: 1;
}
#status .close {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 8px;
    background: none;
    z-index: 2;
}
#status div:hover .close {
    background: transparent url(../../images/img/close.png) no-repeat 0 0;
}


/* Smokey */
#status .smokey {
    color: white;
}
#status .smokey .background {
    border: 3px solid #000;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #000;
    opacity: .65;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}
#status .smokey:hover .background {
    border-color: #fff;
}
#status .smokey .content {
    margin: 5px 5px 5px 69px;
}


/* Gray */
#status .gray {
    color: black;
}
#status .gray .background {
    border: 3px solid #eee;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #eee;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}
#status .gray:hover .background {
    border-color: #009bc5;
}
#status .gray .content {
    margin: 5px 5px 5px 69px;
}


/* Simple */
#status .simple .background {
    border: 2px solid #ccc;
    background: #eee;
}
#status .simple .content {
    margin: 5px 5px 5px 69px;
}


/* OSX */
#status .osx .background {
    border: 1px solid #939393;
    background: #eee url(../../images/img/osx/background.png) repeat-y top left;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}
#status .osx .content {
    margin: 5px 5px 5px 87px;
}
#status .osx .icon {
    left: 28px;
}
#status .osx .close {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 1px;
    left: 1px;
    background: transparent url(../../images/img/osx/close.png) no-repeat 0 0;
    z-index: 2;
}
#status .osx:hover .close {
    background: transparent url(../../images/img/osx/close.png) no-repeat -16px 0;
}


/* Icons */
#status .slide .icon   { background-image: url(../../images/img/slide.png); }
#status .pushpin .icon { background-image: url(../../images/img/pushpin.png); }
